<template>
  <view class="page-container">
    <!-- 投诉表单 -->
    <view class="modules-container">
      <!-- 投诉理由选择 -->
      <view class="group-container">
        <view class="filter-container">
          <text class="filter-item-text">选择投诉理由</text>
          <picker class="picker" :value="selectedReasonIndex" :range="reasons" @change="onReasonChange">
            <view class="picker-content">
              <text>{{ reasons[selectedReasonIndex] }}</text>
            </view>
          </picker>
        </view>
      </view>

      <!-- 具体理由输入 -->
      <view class="group-container">
        <view class="filter-container">
          <text class="filter-item-text">填写具体理由</text>
        </view>
        <textarea v-model="specificReason" class="textarea" placeholder="请输入具体投诉理由..." maxlength="500"></textarea>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="bottom-button" @click="submitComplaint">
      <text class="plus-sign">提交投诉</text>
    </view>
  </view>
</template>

<script>
import { ComplaintAPI } from '../../services/api';  // 导入ComplaintAPI

export default {
  data() {
    return {
      // 投诉理由选项
      reasons: ["请选择投诉理由", "骚扰行为", "欺诈行为", "不当言论", "不守时", "其他"],
      selectedReasonIndex: 0,  // 默认选择第一个选项

      // 用户输入的具体投诉理由
      specificReason: "",
      sender: null,
      userID: 1,  // 假设这里是当前用户的ID（可以通过API获取）
      pinID: '',   // 假设拼单号可以作为额外的字段
    };
  },
  methods: {
    // 投诉理由选择事件
    onReasonChange(e) {
      this.selectedReasonIndex = e.detail.value;
    },

    // 提交投诉事件
    submitComplaint() {
      // 验证选择投诉理由
      if (this.selectedReasonIndex === 0) {
        uni.showToast({
          title: '请选择投诉理由',
          icon: 'none'
        });
        return;
      }

      // 验证是否填写具体投诉理由
      if (this.specificReason.trim() === "") {
        uni.showToast({
          title: '请填写具体投诉理由',
          icon: 'none'
        });
        return;
      }

      // 构建投诉数据对象
      const complaintData = {
        userID: this.sender,  // 用户ID
        complaintType: this.reasons[this.selectedReasonIndex],  // 投诉理由
        complaintReason: this.specificReason,  // 具体投诉理由
        pinID: this.pinID,  // 如果有拼单号，可以在此传递
      };

      // 调用API提交投诉数据
      ComplaintAPI.createComplaint(complaintData)
        .then(response => {
          // 投诉提交成功
          uni.showToast({
            title: '投诉提交成功',
            icon: 'success'
          });

          // 返回上一个页面
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);

          // 清空表单
          this.selectedReasonIndex = 0;
          this.specificReason = "";
          this.pinID = "";  // 清空拼单号（如有）
        })
        .catch(error => {
          // 投诉提交失败
          uni.showToast({
            title: '投诉提交失败，请稍后再试',
            icon: 'none'
          });
          console.error('投诉提交失败:', error);
        });
    },
    
    // 页面加载时获取传递参数
    onLoad(options) {
      // 从 options 获取传递的参数
      if (options.sender) {
        this.sender = options.sender;
        console.log(`接收到投诉用户: ${this.sender}`);
      }
	  if (options.pinID) {
	    this.pinID = options.pinID;
	    console.log(`接收到投诉: ${this.pinID}`);
	  }
    }
  }
};
</script>


<style scoped>
/* 设置 body 和 html 的背景颜色 */
html,
body {
  background-color: #FFF !important;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 页面容器 */
.page-container {
  position: relative;
  width: 100%;
  background-color: transparent;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 底部按钮 */
.bottom-button {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  background-color: #000;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.plus-sign {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial;
  line-height: 20px;
}

/* 投诉模块容器 */
.modules-container {
  padding-top: 5px;
  padding-bottom: 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

/* 投诉表单项容器 */
.group-container {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
}

/* 选择框容器 */
.filter-container {
  width: 100%;
  padding: 10px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 投诉理由选择框文本 */
.filter-item-text {
  font-size: 16px;
  color: #333;
}

/* 投诉理由选择框 */
.picker {
  padding: 5px 10px;
  background-color: white;
  border-radius: 5px;
  border: 1px solid #ddd;
}

/* 投诉文本框 */
.textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  margin-top: 10px;
  resize: none;
}

/* 提交按钮样式 */
.bottom-button {
  background-color: #000;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  z-index: 99;
}

.plus-sign {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial;
  line-height: 20px;
}
</style>
